<template>
	<view class="page">
		<view class="title">语祯云部署</view>
		<view class="panel">
			<u-row gutter="15" justify="space-around" v-for="(v, k) in list" :key="k">
				<u-col span="4" text-align="center">
					<view>
						<u-icon v-if="v.publicDeploy == 1" size="40" name="checkmark-circle-fill" color="#19be6b"></u-icon>
						<u-icon v-else size="40" name="close-circle-fill" color="#fa3534"></u-icon>
					</view>
					<view class="name">{{ v.name }}</view>
				</u-col>
				<u-col span="4" text-align="center">
					<view class="val">
						<text class="font">{{ v.rate }}</text
						>%
					</view>
					<view class="name">增值税率</view>
				</u-col>
				<u-col span="4" text-align="center">
					<view class="val">{{ v.updateTime }}</view>
					<view class="name">更新时间</view>
				</u-col>
			</u-row>
		</view>

		<view class="title">甲方本地部署</view>
		<view class="panel">
			<u-row gutter="15" justify="space-around" v-for="(v, k) in list" :key="k">
				<u-col span="4" text-align="center">
					<view>
						<u-icon v-if="v.localDeploy == 1" size="40" name="checkmark-circle-fill" color="#19be6b"></u-icon>
						<u-icon v-else size="40" name="close-circle-fill" color="#fa3534"></u-icon>
					</view>
					<view class="name">{{ v.name }}</view>
				</u-col>
				<u-col span="4" text-align="center">
					<view class="val">
						<text class="font">{{ v.rate }}</text
						>%
					</view>
					<view class="name">增值税率</view>
				</u-col>
				<u-col span="4" text-align="center">
					<view class="val">{{ v.updateTime }}</view>
					<view class="name">更新时间</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 报价项，固定数据
			item: ['硬件', 'CNC授权', '本地部署授权', '年费', '人工'],
			// 列表
			list: [],
		};
	},
	onLoad(option) {
		this.getList();
	},
	methods: {
		async getList() {
			let res = await this.$api.customer.quotation.listComb();
			if (res.code === 200) {
				let list = res.data || [];

				this.list = [];

				// 把报价项添加list
				list.map((v, k) => {
					v.name = this.item[k];
					return v;
				});

				// 构造 列表 数据
				this.list.push(...list);
			}
		},
	},
	// 页面处理函数--监听用户下拉动作
	async onPullDownRefresh() {
		await this.getList();
		uni.stopPullDownRefresh();
	},
	// 页面处理函数--监听用户上拉触底
	async onReachBottom() {
		uni.stopPullDownRefresh();
	},
};
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100%;
	overflow: auto;
}
.title {
	padding: 20px 15px 10px;
	font-size: 16px;
}
.panel {
	background: #fff;

	.u-row {
		margin: 0 15px;
		padding: 15px 0;
		border-bottom: 1px solid #efefef;
		overflow: hidden;
		&:last-child {
			border: 0;
		}

		.val {
			height: 44rpx;
			line-height: 44rpx;
			font-size: 24rpx;
			white-space: nowrap;
		}
		.name {
			font-size: 28rpx;
			color: $uni-color-subtitle;
		}
	}
}
</style>
